<template>
  <div class="container">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>快手账号管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 表格 -->
    <Container>
      <!-- 标题 -->
      <ContainerTitle>快手账号管理</ContainerTitle>
      <el-input
        placeholder="请输入广告主ID/广告主名称"
        v-model="accountIdAndName"
        class="input-with-select"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="getList"
        ></el-button>
      </el-input>
      <!-- 按钮区 -->
      <div class="btns">
        <el-button type="primary" @click="dialogs">设置监控预警</el-button>
        <el-button type="primary" @click="earlyWarningMode"
          >设置预警方式</el-button
        >
        <el-button type="primary" @click="setOfferDialog"
          >设置出价上限</el-button
        >
        <!-- <el-button type="primary">主要按钮</el-button> -->
      </div>
      <!-- 表格 -->
      <el-table
        ref="multipleTable"
        border
        stripe
        tooltip-effect="dark"
        :data="accountList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          align="center"
          v-for="(item, index) in filterTableColumn"
          :label="item.label"
          :key="index"
        >
          <template slot-scope="scope">
            <!-- 其他 -->
            <template>{{ scope.row[item.prop] }}</template>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        :page-sizes="[50, 100, 500, 1000]"
        :page-size="page.pageSize"
        layout="total, prev, pager, next, sizes"
        :total="pageTotal"
        @size-change="handlePagerSizeChange"
        @current-change="handlePagerCurrentChange"
      />
      <!-- 弹框 -->
      <el-dialog
        title="设置监控预警"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose"
      >
        <div class="dialog-content">
          <div class="dialog-content-title">
            <p>【注意】</p>
            <p>1、消耗、转化成本均按账户层级设置</p>
            <p>2、按天设置，即 每日 00:001-23:59</p>
            <p>3、金额范围：0.01-1000000</p>
            <p>4、0为不设置上限</p>
          </div>
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="toutiao-demo-ruleForm"
          >
            <el-form-item label="设置层级【默认】"> 按账户 </el-form-item>
            <el-form-item label="账户总消耗上限(元/天)" prop="consume">
              <el-input
                v-model="ruleForm.consume"
                type="number"
                @mousewheel.native.prevent
                placeholder="0为不设上限;范围0-1000000"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item
              label="账户累计转化成本上限(元/天)"
              prop="conversion_cost"
            >
              <el-input
                v-model="ruleForm.conversion_cost"
                type="number"
                @mousewheel.native.prevent
                placeholder="0为不设上限;范围0-1000000"
              ></el-input>
            </el-form-item> -->
            <el-form-item label="余额" prop="balance">
              <el-input
                v-model="ruleForm.balance"
                type="number"
                @mousewheel.native.prevent
                placeholder="0为不设上限;范围0-1000000"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="getAccount">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="设置出价上限"
        :visible.sync="offerDialogVisible"
        width="60%"
        :before-close="handleClose"
      >
        <div class="dialog-content">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="pageForm"
            label-width="100px"
            class="toutiao-demo-ruleForm"
          >
            <el-form-item label="设置层级【默认】"> 按账户 </el-form-item>
            <el-form-item label="转化目标出价上限" prop="limit_price">
              <el-input
                v-model="ruleForm.limit_price"
                type="number"
                @mousewheel.native.prevent
                placeholder="0为不设上限;范围0-1000000"
              ></el-input>
              <div>设置后对应账户中的转化目标出价不可超过此限制</div>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="offerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="setOffer">确 定</el-button>
        </span>
      </el-dialog>
    </Container>
  </div>
</template>
<script>
import Container from "@/components/container";
import ContainerTitle from "@/components/container-title";
import CustomTableColumn from "@/components/custom-table-column";

export default {
  components: {
    Container,
    CustomTableColumn,
    ContainerTitle,
  },
  data() {
    var num = (rule, value, callback) => {
      if (value < "0") {
        callback(new Error("输入内容不能小于0"));
      } else if (typeof value != Number) {
        callback(new Error("输入内容不能为汉字"));
      } else {
        callback();
      }
    };

    return {
      accountIdAndName: "",
      dialogVisible: false,
      offerDialogVisible: false,
      ids: null,
      tableColumn: [
        {
          label: "产品名称",
          prop: "product",
          visible: true,
        },
        {
          label: "广告主ID",
          prop: "accountId",
          visible: true,
        },
        {
          label: "广告主名称",
          prop: "accountName",
          visible: true,
        },
        {
          label: "快手昵称与快手 ID",
          prop: "parentName",
          visible: true,
        },
        {
          label: "账户总消耗上限(元/天)",
          prop: "consume",
          visible: true,
        },
        /* {
          label: "账户累计转化成本上限(元/天)",
          prop: "conversionCost",
          visible: true,
        }, */
        {
          label: "余额",
          prop: "balance",
          visible: true,
        },
        {
          label: "预警方式",
          prop: "dingTalkName",
          visible: true,
        },
         {
          label: "转化目标出价上限",
          prop: "limitPrice",
          visible: true,
        },
      ],
      multipleSelection: [],
      ruleForm: {
        consume: "",
        conversion_cost: "",
        balance: "",
        limit_price:""
      },
      rules: {
        limit_price: [
          {
            required: true,
            message: "请输入转化目标出价上限",
            trigger: "blur",
          },
        ],
        balance: [
          { required: true, message: "请输入账号余额", trigger: "blur" },
        ],
        consume: [
          { required: true, message: "请输入账号总消耗金额", trigger: "blur" },
        ],
        conversion_cost: [
          {
            required: true,
            message: "请输入账户累计转化成本上限金额",
            trigger: "blur",
          },
        ],
      },
      page: {
        pageNo: 1,
        pageSize: 100,
      },
      pageTotal: 0,
      accountList: [],
    };
  },
  computed: {
    filterTableColumn() {
      return this.tableColumn.filter((item) => item.visible);
    },
  },
  created() {
    this.getList();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    earlyWarningMode() {
      if (this.multipleSelection == "") {
        this.$message.error("请选择账号");
      } else {
        this.getIds();
        this.$router.push({
          name: "advertise-earlyWarningMode",
          query: {
            action: "create",
            ids: this.ids,
          },
        });
      }
    },
    getIds() {
      var arr = [];
      for (var i = 0; i < this.multipleSelection.length; i++) {
        arr.push(this.multipleSelection[i].accountId);
      }
      var obj = arr.toString();
      this.ids = obj;
    },
    getList() {
      this.$http({
        method: "get",
        url: "/marketing/api/task_app/get_account_lists",
        params: {
          accountIdAndName: this.accountIdAndName,
          offset: this.page.pageNo,
          limit: this.page.pageSize,
        },
      }).then((res) => {
        if (res.data.code == "1") {
          this.accountList = res.data.data.list;
          this.pageTotal = res.data.data.total;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handlePagerSizeChange(v) {
      this.page.pageSize = v;
      this.getList();
    },
    handlePagerCurrentChange(v) {
      this.page.pageNo = v;
      this.getList();
    },
    getAccount() {
      this.ruleForm.limit_price = "";
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$http({
            method: "post",
            url: "/marketing/api/task_app/set_warning",
            params: {
              accountIds: this.ids,
              consume: this.ruleForm.consume,
              conversion_cost: 0,
              balance: this.ruleForm.balance,
              limit_price:""
            },
          }).then((res) => {
            if (res.data.code == "1") {
              this.$message.success(res.data.data);
              this.getList();
              this.dialogVisible = false;
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    dialogs() {
      if (this.multipleSelection == "") {
        this.$message.error("请选择账号");
      } else {
        this.dialogVisible = true;
        this.getIds();
      }
    },
    setOffer() {
      this.ruleForm.consume = "";
      this.ruleForm.conversion_cost = "";
      this.ruleForm.balance = "";
       this.$refs.pageForm.validate((valid) => {
        if (valid) {
          this.$http({
            method: "post",
            url: "/marketing/api/task_app/set_warning",
            params: {
              accountIds: this.ids,
              consume: "",
              conversion_cost: 0,
              balance: "",
              limit_price:this.ruleForm.limit_price
            },
          }).then((res) => {
            if (res.data.code == "1") {
              this.$message.success(res.data.data);
              this.getList();
              this.offerDialogVisible = false;
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    setOfferDialog() {
      if (this.multipleSelection == "") {
        this.$message.error("请选择账号");
      } else {
        this.offerDialogVisible = true;
        this.getIds();
      }
    },
  },
};
</script>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type='number'] {
  -moz-appearance: textfield;
}
* {
  padding: 0;
  margin: 0;
}
.input-with-select {
  width: 25%;
}
.el-table {
  margin-top: 1%;
}
.btns {
  margin-top: 1%;
}
.dialog-content-title {
  margin-left: 50px;
  padding: 10px 5px;
  height: 129px;
  background: inherit;
  background-color: rgba(249, 249, 249, 1);
  line-height: 25px;
}
.toutiao-demo-ruleForm {
  margin-left: 50px;
}
.toutiao-demo-ruleForm .el-form-item__label {
  width: 200px !important;
}
.toutiao-demo-ruleForm .el-form-item__content {
  margin-left: 300px !important;
}
</style>